<template>
  <div id="pay-success-page">
    <div class="page-title" :style="{top:(this.getSafeArea().top-4)+'px'}">
      <div id="back-button" @click="$router.push('/')">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span v-text="isSuccess===1?'支付成功':'支付失败'"></span>
    </div>
    <!--    <div v-if="isSuccess===1">-->
    <!--      <div class="title-bar">已购买商品信息</div>-->
    <!--      <product-list-item v-for="(product,index) in productList" :key="index" :curr-product="product" :show-type="2"/>-->
    <!--      <div class="c"></div>-->
    <!--    </div>-->
    <div class="show-content" v-if="orderData.productList.length>0">
      <!--      <template v-if="isSuccess===0">-->
      <!--        <i class="el-icon el-icon-error" style="font-size: 36px; color: #d43a26"></i>-->
      <!--        <span>订单支付失败，没有库存!</span>-->
      <!--      </template>-->
      <template v-if="isSuccess===1">
        <div class="pay-success-icon"></div>
        <div class="order-info">
          <div class="item">
            <div class="left">订单信息:</div>
            <div class="right">
              <div class="product-list" :style="{
                width:productListMaxWidth+'px'
              }">
                <div class="item" v-for="(product,index) in orderData.productList">
                  <div class="name">
                    <span class="ovd_s" style="display: inline-block;"  v-text="product.shopProductName+'×'+product.nums"  :style="{
                width:productListMaxWidth+'px'
              }"></span>
                  </div>
                  <!--                  <div class="model" v-text="product.model"></div>-->
                  <!--                  <div class="nums" v-text="product.nums"></div>-->
                </div>
                <div class="c"></div>
              </div>
              <div class="c"></div>
            </div>
          </div>

          <div class="item" style="margin-top: 10px">
            <div class="left">付款总额:</div>
            <div class="right red b" v-text="'￥'+ToMoney(orderData.price)"></div>
          </div>

          <div class="item">
            <div class="left">支付方式:</div>
            <div class="right" v-text="payTypeArr[orderData.payType]"></div>
          </div>

          <div class="item" v-if="$route.query.type==='order'">
            <div class="left">订单编号:</div>
            <div class="right" v-text="orderData.orderNo"></div>
          </div>

          <div class="item" v-if="$route.query.type==='orderMore'">
            <div class="left">支付描述:</div>
            <div class="right" v-text="orderData.orderNo"></div>
          </div>


          <div class="c"></div>
        </div>
        <div align="center">
          <el-button v-if="$route.query.type!=='orderMore'" icon="el-icon-view" type="danger" size="medium" @click="goToDetail">订单详情</el-button>
          <el-button v-if="$route.query.type==='orderMore'" icon="el-icon-view" type="danger" size="medium" @click="$router.push('OrderList')">订单列表</el-button>
        </div>
      </template>
    </div>
    <div align="center"></div>
  </div>
</template>

<script>
import ProductListItem from '../common/ProductListItem'

export default {
  name: 'PaySuccess',
  components: {ProductListItem},
  data: function () {
    return {
      payTypeArr: dict.OrderPayArr,
      payTime: '2022-8-20 15:51:44',
      isSuccess: 1,
      productListMaxWidth:(Math.ceil(this.getWinSize().width*0.85)-120),
      productList: demoData.chooseProductList,
      orderData: {
        price: 0,
        productList: [
          {name: '', nums: 0}
        ]
      }
    }
  },
  mounted () {
    if (this.$route.query.type === 'order' || this.$route.query.type === 'orderMore') {
      this.backUrl = '/OrderList'
      this.orderData = JSON.parse(localStorage.getItem('PaySuccessOrderData'))
      if (this.$route.query.type !== 'orderMore'){
        this.getOrderPrice()
        this.orderData.payType=this.$route.query.payType
        this.orderData.orderNo=this.$route.query.orderNo
      }
      console.log('this.orderData',this.orderData)
      this.$forceUpdate()
    }

  },
  methods: {
    goToDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Order/getIdByOrderNo', {
        orderNo: this.$route.query.orderNo
      }, function (id) {
        $this.$router.push({name: 'OrderDetail', query: {id: id}})
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    },
    getOrderPrice: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameMember + 'Order/getPrice', {
        orderNo: this.$route.query.orderNo
      }, function (price) {
        $this.orderData.price = price
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
      })
    }
  }
}
</script>

<style scoped>

</style>
